<template>
  <div class="container">
    <el-scrollbar class="contain-scroll">
      <!-- 专题名称 -->
      <div class="subject-name">
        <el-card class="subject-name1"><b>{{ route.query.name }}</b></el-card>
      </div>
      <!-- 上传、查询面板 -->
      <div class="operation-panel">
        <!-- <div>
          <el-card :body-style="{ padding: '20px 15px !important' }">
            <div class="operation-item" @click="openUpload">
              <div>
                <el-icon>
                  <UploadFilled />
                </el-icon>
              </div>
              <span>上传</span>
            </div>
            <div class="operation-item" @click="openQuery">
              <div>
                <svg-icon icon-class="search"></svg-icon>
              </div>
              <span>查询</span>
            </div>
          </el-card>
        </div> -->
        <transition name="slide-fade">
          <el-card v-if="queryOpen" class="queryFormCard" :body-style="{ padding: '20px 15px 0 !important' }">
            <el-form :model="queryForm" ref="queryFormRef" label-width="100px">
              <el-form-item label="数据范围：" class="data-range">
                <el-select v-model="queryForm.provinceId" placeholder="请选择省" @change="chooseQueryProvince" clearable>
                  <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <el-select v-model="queryForm.cityId" placeholder="请选择市" @change="chooseQueryCity" clearable>
                  <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <el-select v-model="queryForm.countyId" placeholder="请选择区县" @change="chooseQueryCounty" clearable>
                  <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数据类型：">
                <el-select v-model="queryForm.type" @change="changeType" clearable>
                  <!-- <el-option label="点要素类" value="PointData"></el-option>
                <el-option label="线要素类" value="LineData"></el-option>
                <el-option label="面要素类" value="PlaneData"></el-option> -->
                  <el-option v-for="item in codeOption" :key="item.dictItemCode" :label="item.dictItemName"
                    :value="item.dictItemCode"></el-option>
                </el-select>
                <el-select v-model="queryForm.typeCode" placeholder="请选择" @change="codeTypeSelect" clearable>
                  <el-option v-for="item in codeTypeOption" :key="item.dictItemCode" :label="item.dictItemName"
                    :value="item.dictItemCode" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="queryBtn" :disabled="!isQuery">查询</el-button>
                <el-button plain @click="closeBtn">取消</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </transition>
      </div>

      <!--地图-->
      <DataLoaderMap v-if="completeRefreshIndexMap" ref="mapRef" :allListData="allListData" :iServerIdList="iServerIdList"
        :iServerName="iServerName" :positionData="positionData" :pointLinePloygonType="pointLinePloygonType"
        @uploadFile="openUpload" @selectData="openQuery"
        @getDetailListByCode="getDetailListByCode" />

      <!-- 上传弹框及列表 -->
      <UploadTable ref="uploadDialogRef" v-model:uploadOpen="uploadOpen" @selectIServerId="selectIServerId"
        @setIServerName="setIServerName" />

      <!-- 查询表格 -->
      <QueryTable ref="queryTableRef" :queryForm="queryForm" :codeTypeName="codeTypeName"
        @selectIServerId="selectIServerId" @iServerPosition="iServerPosition" />

      <router-view></router-view>
    </el-scrollbar>
  </div>
</template>
<script setup name="spatialData">
import { getProvince, getChildArea } from "@/api/system/division"
import { getDict } from '@/api/system/dict'
import UploadTable from './component/uploadTable.vue'
import QueryTable from './component/queryTable.vue'
import DataLoaderMap from '@/map/dataLoaderMap.vue'
import { ref } from "vue"

const route = useRoute()
const { proxy } = getCurrentInstance()

const uploadData = reactive({
  provinceData: [],
  cityData: [],
  areaData: [],
  codeOption: [],
  codeTypeOption: []
})
const { provinceData, cityData, areaData, codeOption, codeTypeOption } = toRefs(uploadData)

// 地图
const completeRefreshIndexMap = ref(true);//防止刷新后地图不显示
const allListData = ref([]);
const showTableBool = ref(false);//是否显示表格
const tempTableListData = ref([]);//根据行政区划代码查询活动数据列表
//根据行政区划代码查询活动数据列表
const getDetailListByCode = (code) => {
  let array = [];
  let list = allListData.value;
  if (list != null && list.length > 0) {
    for (let i = 0; i < list.length; i++) {
      if (list[i].iaCode == code) {
        array.push(list[i]);
      }
    }
  }
  tempTableListData.value = array;
  showTableBool.value = true;
}
// 上传
const uploadOpen = ref(false)
const openUpload = () => {
  uploadOpen.value = true
  queryOpen.value = false
  proxy.$refs.queryTableRef.columnDataChecked = []
  proxy.$refs.uploadDialogRef.isShowList = false
}
// 查询面板
const queryOpen = ref(false)
const queryFormInit = () => ({ dataRange: [], page: 1, rows: 10 })
const queryForm = reactive(queryFormInit())
const openQuery = () => {
  queryOpen.value = !queryOpen.value
  proxy.resetAllForm(queryForm, queryFormInit())
  proxy.$refs.queryTableRef.columnDataChecked = []
  proxy.$refs.uploadDialogRef.isShowList = false
  getProvinceData()
  getType()
}
const getProvinceData = () => {
  getProvince().then(res => {
    if (res.code == 200) {
      provinceData.value = res.data
    }
  })
}
const chooseQueryProvince = (value) => {
  queryForm.province = provinceData.value.find(item => item.id == value)?.name
  queryForm.cityId = null
  queryForm.countyId = null
  cityData.value = []
  areaData.value = []
  getChildArea(value).then(response => {
    cityData.value = response.data
  })
  queryForm.dataRange.push(value)
}
const chooseQueryCity = (value) => {
  queryForm.city = cityData.value.find(item => item.id == value)?.name
  queryForm.countyId = null
  areaData.value = []
  getChildArea(value).then(response => {
    areaData.value = response.data
  })
  queryForm.dataRange.push(value)
}
const chooseQueryCounty = (value) => {
  queryForm.county = areaData.value.find(item => item.id == value)?.name
  queryForm.dataRange.push(value)
}
const getType = () => {
  getDict('Space').then(res => {
    codeOption.value = res.data
  })
}
const changeType = (value) => {
  codeTypeOption.value = []
  queryForm.typeCode && (queryForm.typeCode = '')
  getDict(value).then(res => {
    codeTypeOption.value = res.data
  })
}
const codeType = ref('')
const codeTypeName = ref('')
const codeTypeSelect = (value) => {
  codeType.value = value
  codeTypeName.value = codeTypeOption.value.find(item => item.dictItemCode == value)?.dictItemName
}
const iServerName = ref('')
const setIServerName = (name) => {
  iServerName.value = name
}
const pointLinePloygonType = ref('')
const queryBtn = () => {
  pointLinePloygonType.value = queryForm.type
  iServerName.value = codeTypeOption.value.find(item => item.dictItemCode == queryForm.typeCode)?.description
  proxy.$refs.queryTableRef.queryList()
  queryOpen.value = false
}
const iServerIdList = ref([])
const selectIServerId = (list) => {
  iServerIdList.value = list
}
const positionData = ref('')
const iServerPosition = (wkt) => {
  positionData.value = ''
  setTimeout(() => {
    positionData.value = wkt
  }, 200)
}
const closeBtn = () => {
  queryOpen.value = false
}
watch(() => route.query.id, () => {
  proxy.$refs.queryTableRef.columnDataChecked = []
})
// const isQuery = computed(() => queryForm.typeCode && queryForm.countyId)
const isQuery = computed(() => queryForm.typeCode)
</script>
<style scoped lang="scss">
.container {
  position: relative;
  overflow-y: auto;
  width: 100%;
  height: 100%;

  :deep(.el-scrollbar.contain-scroll) {
    &>.el-scrollbar__wrap {
      &>.el-scrollbar__view {
        padding-right: 10px;
        width: 100%;
      }
    }
  }

  .subject-name {
    position: absolute;
    width: fit-content;
    z-index: 10;
    left: 10px;
    top: 10px;
  }
  .subject-name1 {
    color: white;
    background-size: contain;
    background-image: url(/src/assets/map/image/left-bg2.png)!important;
  }

  .operation-panel {
    position: absolute;
    top: 86px;
    right: 16px;
    z-index: 10;
    font-weight: bold;

    .el-card {
      width: fit-content;
    }

    .queryFormCard {
      position: absolute;
      top: 0;
      right: 70px;
      width: max-content;
    }

    .operation-item {
      text-align: center;
      cursor: pointer;

      &>div {
        transform: scale(1.2);
        margin: 0 0 5px 0;
      }
    }

    .data-range {
      .el-select {
        width: 140px;
      }
    }

    .el-select:not(:last-child) {
      margin-right: 10px;
    }

    .operation-item:not(:last-child) {
      margin-bottom: 20px;
    }
  }

  :deep(.el-space.upload-space) {
    width: 100%;

    .el-space__item {
      width: 100%;
    }
  }

  :deep(.el-space.space-width100) {
    .el-space__item {
      width: 100%;
    }
  }
}
</style>